<template>
  <div class="persuaded">
    <div class="flex-line bg-white">
      <span class="name-space">沟通方式<i class="require"></i></span>
      <picker-common
        :selectData.sync="communicateType"
        :pickerList="communication"
        :title="'沟通方式'"
        :selectVal="communicateType"
      ></picker-common>
    </div>
    <div class="handle-opinion">
      <p>
        <span>处理意见<i class="require"></i></span>
      </p>
      <cube-textarea
        v-model="submitData.remark"
        placeholder="请输入处理意见"
      ></cube-textarea>
    </div>
    <div class="image-upload">
      <p>
        <span>处理图片<i class="require"></i></span>
        <span>(最多上传五张)</span>
      </p>
      <cube-upload
        ref="upload"
        :max="5"
        v-model="uploadImgs"
        :simultaneous-uploads="1"
      ></cube-upload>
    </div>
    <div style="margin-top: 10px;">
      <cube-radio-group
        v-model="selectedLitigantType"
        :options="options"
        :horizontal="true"
      />
      <div class="border-line flex-line bg-white">
        <span class="name-space">{{
          selectedLitigantType == "个人" ? "姓名" : "单位名称"
        }}</span>
        <cube-input
          v-model="submitData.litigantName"
          placeholder="请输入"
          style="width: 250px;"
        ></cube-input>
      </div>
      <div
        class="border-line flex-line bg-white"
        v-if="selectedLitigantType == '个人'"
      >
        <span class="name-space">证件类型</span>
        <picker-common
          :selectData.sync="cardType"
          :pickerList="cardList"
          :title="'证件类型'"
          :selectVal="cardType"
        ></picker-common>
      </div>
      <div
        class="border-line flex-line bg-white"
        v-if="selectedLitigantType == '个人'"
      >
        <span class="name-space">证件号码</span>
        <cube-input
          v-model="submitData.litigantCode"
          placeholder="请输入"
          style="width: 250px;"
        ></cube-input>
      </div>
      <div
        class="border-line flex-line bg-white"
        v-if="selectedLitigantType == '单位'"
      >
        <span class="name-space">信用代码</span>
        <cube-input
          v-model="submitData.creditCode"
          placeholder="请输入"
          style="width: 250px;"
        ></cube-input>
      </div>
    </div>
    <!-- 责令改正的文书上传和音频上传 -->
    <div v-if="handleType == 5">
      <div class="image-upload">
        <cube-radio-group
          v-model="selectedDoc"
          :options="options2"
          :horizontal="true"
        />
        <div v-if="selectedDoc == '上传图片'">
          <p>
            <span>文书图片</span>
            <span>(最多上传五张)</span>
          </p>
          <cube-upload
            ref="upload"
            :max="5"
            v-model="uploadDoc"
            :simultaneous-uploads="1"
          ></cube-upload>
        </div>
        <div v-else class="bind-doc">
          <div class="list" v-for="i in number" :key="i">
            <cube-input placeholder="请输入" style="width: 250px;"></cube-input>
            <cube-button
              :light="true"
              class="del-btn"
              v-show="inputLength > 1"
              @click="deleteInput"
              >删 除</cube-button
            >
          </div>
          <cube-button class="add-btn" @click="addNewInput">新 增</cube-button>
        </div>
      </div>
      <div class="image-upload">
        <p>
          <span>处理音频</span>
          <span>(最多上传五个)</span>
        </p>
        <cube-upload
          ref="audioUpload"
          :max="5"
          v-model="uploadAudio"
          accept="audio/*"
          class="audio-upload"
          :multiple="false"
        ></cube-upload>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    handleType: {
      type: Number,
      default: 0
    }
  },
  components: {
    "picker-common": () => import("@/components/picker-common/picker-common"),
  },
  data() {
    return {
      communication: [
        {
          value: 1,
          text: "电话沟通"
        },
        {
          value: 2,
          text: "短信沟通"
        },
        {
          value: 3,
          text: "当面沟通"
        }
      ],
      cardList: [
        {
          value: "1",
          text: "身份证"
        },
        {
          value: "2",
          text: "台胞证"
        },
        {
          value: "3",
          text: "港澳身份证"
        }
      ],
      communicateType: { id: "", text: "" },
      cardType: { id: "1", text: "身份证" },
      submitData: {
        //  提交数据
        communicateType: null,
        remark: "",
        cardType: "1",
        litigantName: "",
        litigantId: "",
        litigantType: 1,
        litigantCode: "",
        creditCode: "",
        litigantLegal: ""
      },
      uploadImgs: [],
      uploadDoc: [],
      uploadAudio: [],
      // 选择当事人
      options: ["个人", "单位"],
      selectedLitigantType: "个人",
      selectedDoc: "上传图片",
      options2: ["上传图片", "绑定文书"],
      number: 1,
      inputLength: 1
    }
  },
  computed: {

  },
  watch: {
    communicateType(n) {
      this.submitData.communicateType = n.id;
    },
    cardType(n) {
      this.submitData.cardType = n.id;
    },
    selectedLitigantType(n) {
      if (n == "个人") {
        this.submitData.litigantType = 1;
      } else this.submitData.litigantType = 2;
      this.submitData.litigantName = "";
    },
    selectedDoc(val) {
      if (val == "上传图片") {
        this.number = 1;
        this.inputLength = 1;
      } else {
        this.uploadDoc = []
      }
    }
  },
  methods: {
    // 绑定文书
    addNewInput() {
      this.number++;
      this.inputLength++;
    },
    deleteInput(e) {
      let delNode = e.target.parentElement;
      let bindDoc = document.querySelector(".bind-doc");
      bindDoc.removeChild(delNode);
      // 只有一个输入框时不能删除
      this.inputLength = document.querySelectorAll(".bind-doc .list").length;
    },
    getBindDoc() {
      let input = document.querySelectorAll(".bind-doc .cube-input");
      let doc = "绑定的文书号：";
      if (input.length) {
        for (let i of input) {
          doc += i.children[0].value + "，";
        }
        return doc.substr(0, doc.length - 1);
      }
    }
  }
}
</script>
